<template>
    <div class="list-item">
        <div class="item-box clearfix">
            <div class="col col-img">
                <img v-lazy="goodInfo.picture" />
            </div>
            <div class="col col-name">{{ goodInfo.goodsName }}</div>
            <div class="col col-price">
                {{Number(goodInfo.unitPrice).toFixed(2)}} 元 X
                <span>{{ goodInfo.number }}</span>
            </div>
            <div class="col col-total">{{Number(goodInfo.price).toFixed(2)}} 元</div>
        </div>
    </div>
</template>

<script>
export default {
    name:"list-item",
    props:["goodInfo"]
};
</script>

<style lang="less" scoped>
.list-item {
    .item-box {
        padding: 15px 0;
        .col {
            line-height: 80px;
            height: 80px;
            font-size: 16px;
        }

        .col-name {
            font-size: 14px;
        }

        .col-total {
            color: #ff6700;
        }
    }
}

.col {
    white-space: nowrap;
    color: #424242;
    float: left;
}

.col-img {
    img {
        width: 40px;
        height: 40px;
        vertical-align: middle;
    }
}
.col-name {
    width: 600px;
    padding-left: 10px;
}

.col-price {
    width: 360px;
    text-align: center;
}

.col-total {
    width: 120px;
    text-align: center;
}
</style>